<template>
  <view class="list">
    <u-list
      v-if="orderList.length !== 0"
      height="100vh"
      @scrolltolower="getMore"
    >
      <view class="initList card">
        <view class="item" v-for="item in orderList" :key="item.id">
          <Commodity @change="handleGoodsChange" type="card" :data="item" />
        </view>
      </view>
    </u-list>
    <emptyList v-else></emptyList>
  </view>
</template>

<!-- 常买清单 -->
<script setup>
import { getCusGoodsFavorite } from "@/api/home";
import { useList } from "@/hooks/useList";
import emptyList from "@/components/empty/emptyList.vue";
import Commodity from "@/components/commodity/commodity.vue";
import { useShopStore } from "@/store/shop.js";
const shopStore = useShopStore();
const getList = async (item) => {
  const res = await getCusGoodsFavorite({
    ...item,
  });
  return res;
};
const { orderList, getMore } = useList(getList);

const handleGoodsChange = (item) => {
  shopStore.updateData(item);
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.list {
  .initList {
    margin-top: 10px;
    &.card {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .item {
        &:last-child {
          &:nth-child(2n - 1) {
            margin-right: 50%;
          }
        }
      }
    }
  }
}
</style>
